<!--电子文件中心预接收-->
<template>
  <div class="pre-file">
    <left-tree
      :isShowLeftTree.sync="isShowLeftTree"
      :treeData="treeData">
    </left-tree>
    <div class="pre-right" :style="{width: (isShowLeftTree ? 'calc(100% - 2px)': '82%')}">
      <splitpanes horizontal>
        <pane size="50">
          <a-card size="small" :headStyle="{ background: '#f9f9f9' }" :bodyStyle="{ height: 'calc(100% - 48px)' }">
            <div slot="title">
              <div class="top-icon">
                <icon-font type="icon-401" />
              </div>
              <span>电子文件中心预接收</span>
            </div>
            <div slot="extra">
              <a-button type="primary" icon="check" @click="dialogCheckVisible = true" class="icon-button">四性检测</a-button>
              <a-button type="primary" icon="upload">确认接收</a-button>
            </div>
            <el-table
              :data="tableData"
              highlight-current-row
              border
              height="100%"
              :row-style="{height:'40px'}"
              :cell-style="{padding:'0px'}"
              :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
              style="width: 100%">
              <el-table-column
                type="selection"
                width="50">
              </el-table-column>
              <slot v-for="(item,index) in columns">
                <el-table-column
                  v-if="item.field!=='IsCheck'"
                  :key="index"
                  :property="item.field"
                  :label="item.title"
                  :width="item.width"
                  show-overflow-tooltip
                  sortable>
                </el-table-column>
                <el-table-column
                  v-if="item.field==='IsCheck'"
                  :key="index"
                  :property="item.field"
                  :label="item.title"
                  :width="item.width"
                  show-overflow-tooltip
                  sortable>
                  <template slot-scope="scope">
                    <a-tag color="blue" v-if="scope.row.IsCheck">检测通过</a-tag>
                    <a-tag color="red" v-else>未通过</a-tag>
                  </template>
                </el-table-column>
              </slot>
            </el-table>
          </a-card>
        </pane>
        <pane size="50">
          <el-tabs type="border-card">
            <el-tab-pane label="组件信息">
              <full-tab></full-tab>
            </el-tab-pane>
            <el-tab-pane label="档案元数据信息">
              <meta-tab1></meta-tab1>
            </el-tab-pane>
            <el-tab-pane label="办理流程元数据信息">
              <meta-tab2></meta-tab2>
            </el-tab-pane>
            <el-tab-pane label="电子文件元数据信息">
              <meta-tab3></meta-tab3>
            </el-tab-pane>
            <el-tab-pane label="四性检测结果">
              <check-tab></check-tab>
            </el-tab-pane>
          </el-tabs>
        </pane>
      </splitpanes>
    </div>

    <!-- 四性检测弹框 -->
    <a-modal
      :maskClosable="false"
      title="四性检测"
      v-model="dialogCheckVisible"
      width="60%"
      :body-style="{ padding: 0 }">
      <four-check></four-check>
    </a-modal>
  </div>
</template>

<script>
import { LeftTree, FourCheck } from '@/components'
import { FullTab, MetaTab1, MetaTab2, MetaTab3, CheckTab } from './components'
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
export default {
  name: '',
  components: {
    LeftTree,
    FourCheck,
    FullTab,
    MetaTab1,
    MetaTab2,
    MetaTab3,
    CheckTab,
    Splitpanes,
    Pane
  },
  data () {
    return {
      isShowLeftTree: false,
      dialogCheckVisible: false, // 四性检测弹框是否显示
      treeData: [
        {
          title: '诉讼档案案卷表',
          key: '1'
        },
        {
          title: '科研卷内表',
          key: '2'
        }
      ],
      tableData: [
        {
          OrderNum: 1,
          packgeName: '关于项目运营管理通知',
          Create_Time: '2020-08-20',
          Remark: '123',
          IsCheck: false
        }
      ],
      columns: [
        {
          title: '顺序号',
          field: 'OrderNum'
        },
        {
          title: '包名称',
          field: 'packgeName'
        },
        {
          title: '创建日期',
          field: 'Create_Time'
        },
        {
          title: '备注',
          field: 'Remark'
        },
        {
          title: '检测标识',
          field: 'IsCheck'
        }
      ]
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
  }
}
</script>
<style lang="less" scoped>
.pre-file {
  width: 100%;
  height: 100%;
  padding: 10px 10px 0;
  background: #f0f2f5;
  .pre-right {
    float: left;
    width: 82%;
    height: 100%;
    transition: all 0.2s;
    .el-tabs {
      height: 100%;
      /deep/ .el-tabs__content {
        padding: 10px;
        height: calc(100% - 40px);
        .el-tab-pane {
          height: 100%;
        }
      }
    }
  }
}
</style>
